<script setup>
import { getParkRole,delParkRole } from '../../api/billling'
import { ref, onMounted } from 'vue'
import {message} from 'ant-design-vue'
import roleModal from './components/roleModal.vue'
const list = ref([]) //渲染列表
const columns = [
  { title: '序号', dataIndex: 'num' },
  { title: '计费规则编号', dataIndex: 'ruleNumber', key: 'ruleNumber' },
  { title: '计费规则名称', dataIndex: 'ruleName', key: 'ruleName' },
  { title: '免费时长(分钟)', dataIndex: 'freeDuration', key: 'freeDuration' },
  { title: '收费上限(元)', dataIndex: 'chargeCeiling', key: 'chargeCeiling' },
  { title: '计费方式', dataIndex: 'chargeType', key: 'chargeType' },
  { title: '计费规则', dataIndex: 'ruleNameView', key: 'ruleNameView' },
  { title: '操作', dataIndex: 'edit' }
]
const form = ref({
  page: '1',
  pageSize: '10'
})
const total = ref()
const getParkRoleAPI = async (form) => {
  const { data } = await getParkRole(form)
  list.value = data.rows
  total.value = data.total
  console.log(data)
}
onMounted(() => {
  getParkRoleAPI(form.value)
})
//分页
const onChange=(page,pageSize)=>{
    form.value.page=page
    form.value.pageSize=pageSize
    getParkRoleAPI(form.value)
}
//删除
const btnDel=async(id)=>{
    await delParkRole(id)
    if(list.value.length===0){
        form.value.page--
    }
    message.success('删除成功')
    getParkRoleAPI(form.value)
}
const showModal=ref(false)//弹框
//增加
const addParkRole=()=>{
    showModal.value=true
}
//通知父组件更新
const updateAddRole=()=>{
  getParkRoleAPI(form.value)
}
//编辑
const editModal=ref(null)
const btnEdit=async(id)=>{
  await editModal.value.getParkRoleDetaliApi(id)
  showModal.value=true
}
</script>
<template>
  <div class="container">
    <div class="container-app">
      <a-button type="primary" style="margin-bottom: 20px;" @click="addParkRole">增加停车计费规则</a-button>
      <a-table :dataSource="list" :columns="columns" :pagination="false" size="small">
        <template #bodyCell="{ column, index, text,record }">
          <template v-if="column.dataIndex === 'chargeType'">
            <span v-if="text === 'duration'">时长收费</span>
            <span v-else-if="text === 'turn'">按次收费</span>
            <span v-else>分段收费</span>
          </template>
          <template v-if="column.dataIndex === 'num'">
            {{ (form.page - 1) * form.pageSize + index + 1 }}
          </template>
          <template v-if="column.dataIndex === 'edit'">
            <a-space>
              <a-button type="text" style="color: blue" @click="btnEdit(record.id)">编辑</a-button>
            </a-space>
            <a-button type="text" style="color: blue" @click="btnDel(record.id)">删除</a-button>
          </template>
        </template>
      </a-table>
      <a-row type="flex" justify='end'>
        <a-pagination
        size="small"
        v-model:current="form.page"
        v-model:pageSize="form.pageSize"
        :total="total"
        :show-total="(total) => `共 ${total} 页`"
        :show-size-changer="['10','20','50','100']"
        @change="onChange"
      ></a-pagination>
      </a-row>
    </div>
  </div>
  <role-modal ref="editModal" v-model:showModal="showModal" @successAdd="updateAddRole"></role-modal>
</template>
<style lang="less" scoped>
.container {
  height: 100%;
  padding: 0 1.3333vw;
}
.container-app {
  background-color: #fff;
  padding: 10px 20px;
}
.ant-divider {
  margin-top: 0;
}
</style>
